<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .Box {
        width: 200px;
        height: 200px;
        margin: 200px 200px;
        position: relative;
        cursor: move;
      }
      .Box img {
        width: 100%;
        height: 100%;
        display: block;
      }
      .selectBox {
        width: 50px;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.4);
        pointer-events: none;
        position: absolute;
        display: none;
      }
      .copy {
      width: 250px;
      height: 250px;
      overflow: hidden;
      pointer-events: none;
      display: none;
      position: relative;
      }
      .copy img{
        width: 1000px;
        height: 1000px;
        position: absolute;
        /* transform: translate(300px); */
      }
    </style>
  </head>
  <body>
    <div class="Box">
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp2.ifengimg.com%2F2019_05%2F3FA71BA3C44FA16EA50E3C805BB87614873886C3_w900_h600.jpg&refer=http%3A%2F%2Fp2.ifengimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672753417&t=7b6f3b60b4d9ebc99a71e1151a2d5af8"
        alt=""
      />
      <div class="selectBox"></div>
      <div class="copy">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp2.ifengimg.com%2F2019_05%2F3FA71BA3C44FA16EA50E3C805BB87614873886C3_w900_h600.jpg&refer=http%3A%2F%2Fp2.ifengimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672753417&t=7b6f3b60b4d9ebc99a71e1151a2d5af8"
          alt=""
        />
      </div>
    </div>
    <script>
      let Box = document.querySelector(".Box");
      let selectBox = document.querySelector(".selectBox");
      let copy = document.querySelector(".copy");
      let copys = document.querySelector(".copy img");

    //   console.log(copys);
      Box.onmousemove = function (event) {
        // 兼容性
        event = event || window.event;
        let x = event.offsetX - selectBox.offsetWidth / 2;
        let y = event.offsetY - selectBox.offsetHeight / 2;
        if (x <= 0) x = 0;
        if (y <= 0) y = 0;
        if (x >= Box.offsetWidth - selectBox.offsetWidth) {
          x = Box.offsetWidth - selectBox.offsetWidth;
        }
        if (y >= Box.offsetHeight - selectBox.offsetHeight) {
          y = Box.offsetHeight - selectBox.offsetHeight;
        }
        selectBox.style.display = "block";
        selectBox.style.top = y + "px";
        selectBox.style.left = x + "px";

        // let l = -x * 1000 / 200 + "px";     
        // let n = -y * 1000 / 200 + "px";     
        copy.style.display = 'block';
        copys.style.transform = `translate(${-x * 1000 / 200}px,${-y * 1000 / 200}px)`;
        // copys.style.left = l + "px";
        // copys.style.top = n + "px";
      };
    //   鼠标移出事件，黑色小方框移出
    Box.onmouseleave = function(){
      selectBox.style.display = "none";
      };
    </script>
  </body>
</html>
